<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>图片上传</title>
    <a th:href="${#httpServletRequest.getScheme() + '://' + #httpServletRequest.getServerName() + ':' + #request.getServerPort()  + #request.getContextPath() + '/'} " id="contextPath"></a>
    <!--		<link href ="img/favicon.ico" rel="shortcut icon">-->
    <script src="js/jquery-3.4.1.min.js"></script>
    <script src="layui/layui.js"></script>
    <link rel="stylesheet" href="layui/css/layui.css">
    <link rel="stylesheet" href="css/uploadpic.css">
    <script src="js/uploadpic.js"></script>
</head>
<body>
<div class="layui-row layui-col-space10">
    <div class="layui-col-md8 layui-col-md-offset2">
        <h2 style="display : inline"><a href="/UserManager">用户管理</a></h2><h2 style="display : inline"><a href="/ManagerPic">图片管理</a></h2><h1 style="display : inline">图片上传</h1><br>
        <h2>上传用户：
            <span th:if="${username} != null">
                <span th:text="${username}">用户名</span>
            </span>
            <span th:if="${username} == null">未登录</span>
        </h2>
        <span th:if="${username} != null">
            <div class="layui-upload-drag" id="uploadpic">
            <i class="layui-icon"></i>
            <p>点击上传，或将文件拖拽到此处</p>
            <div class="layui-hide" id="uploadDemoView">
                <hr>
                <img src="" alt="上传成功后渲染" style="max-width: 196px">
            </div>
        </div>
        </span>
        <div id="uploadedlist" class="uploaded">
<!--            <div class="picLayout" id="picId1">-->
<!--                <div class="uploadedpic">-->
<!--                    <img src="/loadpic/1">-->
<!--                </div>-->
<!--                <i class="layui-icon layui-icon-close" onclick="deletepic(1)"></i>-->
<!--                <span onclick="copyurl(1)">查看图片链接</span>-->
<!--            </div>-->

<!--            <div class="picLayout">-->
<!--                <div class="uploadedpic">-->
<!--                    <img src="/loadpicfile/10-007kPYPngy1gc27g41x7kg307u05k7wi.png">-->
<!--                </div>-->
<!--                <i class="layui-icon layui-icon-close"></i>-->
<!--                <span>查看图片链接</span>-->
<!--            </div>-->

<!--            <div class="picLayout">-->
<!--                <div class="uploadedpic">-->
<!--                    <img src="/loadpicfile/9-007kPYPngy1gc27g41x7kg307u05k7wi.gif">-->
<!--                </div>-->
<!--                <i class="layui-icon layui-icon-close"></i>-->
<!--                <span>查看图片链接</span>-->
<!--            </div>-->
        </div>

    </div>
</div>

</body>
<script>
    layui.use('upload', function(){
        var upload = layui.upload;


        //执行实例
        var uploadInst = upload.render({
            elem: '#uploadpic' //绑定元素
            ,url: '/upload/UplaodPic' //上传接口
            ,done: function(jsonRes){
                //上传完毕回调
                layer.msg(jsonRes.msg);
                if (jsonRes.code==1)
                    addPicOnPage(jsonRes.data)
            }
            ,error: function(){
                //请求异常回调
                layer.msg('请求异常回调')
            }
        });
    });
</script>
</html>